<template>
  <div class="box">
    <ul class="headlineX">
      <!-- 在li里法请求，而且要使用keep-alive -->
      <li
        v-for="(content, index) in leimu.content"
        :key="index"
        :class="activeIndex == index ? 'content2' : 'content1'"
        @click="changeIndex(index,content)"
      >
        <router-link to="" class="router">
          {{ content }}
          <span class="underline"></span>
        </router-link>
      </li>
    </ul>
    <GoodsShowTool :jingxuan="jingxuan" />

  </div>
</template>

<script>
//chuang
import axios from "axios";
import GoodsShowTool from "./GoodsShowTool.vue";

export default {
  name: "GoodsShow",
  components: {
    GoodsShowTool,
  },
  props: ["leimu"],
  data() {
    return {
      oTop: [],
      isZhan:true,
      jingxuan: [],
      activeIndex: 0,
    };
  },
  watch: {
    leimu: {
      handler(newVal, oldVal) {
        axios({
          url: "/goods" + this.leimu.id + "?q=精选",
        }).then((res) => {
          this.jingxuan = res.data;
        });
      },
    },
  },
  methods: {
    fixedPosition() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let oHeadline = document.querySelector(".headlineX");

      this.oTop.push(oHeadline.offsetTop+50);
      // console.log(this.data);

      if (scrollTop >= this.oTop[0]) {
        oHeadline.style.position = "fixed";
        oHeadline.style.top = "50px";
      } else {
        // console.log("slkjdf")
        oHeadline.style.position = "static";
      }
    },
    changeIndex(idx,con) {
      this.activeIndex = idx;
      // this.isZhan = false;
      this.jingxuan=[];
      axios({
        url:"/goods" + this.leimu.id + "?q="+con
      }).then((res)=>{
        // this.$router.push({ path: '/DaHome/GoodsShow/GoodsShowTool1',query:{"jingxuan":JSON.stringify(res.data)}});
        this.jingxuan = res.data;
        console.log(this.jingxuan)
      })

    },
  },
  mounted() {
    window.addEventListener("scroll", this.fixedPosition);
  },
  destroyed() {
    window.removeEventListener("scroll", this.fixedPosition);
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  box-sizing: border-box;
}
.headlineX {
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
  background: white;
}
.headlineX::-webkit-scrollbar {
  display: none;
}
.headlineX li {
  flex-shrink: 0;
  padding: 5px 15px;
  text-align: center;
}
.content1 {
  color: black;
}
.content2 {
  flex-shrink: 0;
  padding: 5px 15px;
  text-align: center;
  color: rgb(243, 181, 67);
}
.headlineX li .router {
  color: inherit;
}
.headlineX li:nth-child(1) {
  padding: 5px 25px;
}

.headlineX .underline {
  display: block;
  width: 35px;
  height: 5px;
  border-radius: 5px;
  background: rgb(243, 181, 67);
  margin: 0 auto;
  opacity: 0;
}
.headlineX li:hover .underline {
  opacity: 1;
}

.goodsShow {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}

.goodsShow ul {
  width: 48%;
}
.goodsShow li {
  width: 100%;
  border-radius: 0.1rem;
  background-color: white;
  box-sizing: border-box;
  padding-bottom: 0.1rem;
}
.goodsShow li div {
  width: 90%;
  margin: 0 auto;
}
.imgContain {
  width: 100%;
  border-radius: 0.1rem 0.1rem 0 0;
}
.imgContain img {
  width: 100%;
  border-radius: 0.1rem 0.1rem 0 0;
}
.newPrice {
  display: flex;
  justify-content: space-between;
}
.newPrice span:nth-child(1) {
  color: orange;
}
.newPrice span:nth-child(2) {
  color: rgb(189, 186, 186);
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid rgb(189, 186, 186);
  font-size: 0.12rem;
  line-height: 0.2rem;
}
.oldPrice {
  color: rgb(189, 186, 186);
  text-decoration: line-through;
  font-size: 0.12rem;
}
.label span {
  display: inline-block;
  border-radius: 0.03rem;
  font-size: 0.12rem;
  color: rgb(189, 186, 186);
  border: 0.01rem solid rgb(189, 186, 186);
}
</style>